<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选
        function checkAll() {
            //让所有复选框选中
            //document.getElementsByName(); 是根据指定name属性查询返回多个标签对象集合
            //这个集合的操作跟数组一样，集合中每个元素都是dom对象
            //这个集合中元素的顺序为升序
            let hobbies = document.getElementsByName("hobby");
            //checked表示复选框选中状态。选中为t，否则为f，这个属性可读可写
            for (let i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = true;
            }
        }

        //全不选
        function checkNo() {
            let hobbies = document.getElementsByName("hobby");
            //checked表示复选框选中状态。选中为t，否则为f，这个属性可读可写
            for (let i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = false;
            }
        }

        //反选
        function checkReverse() {
            let hobbies = document.getElementsByName("hobby");
            //checked表示复选框选中状态。选中为t，否则为f，这个属性可读可写
            for (let i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = !hobbies[i].checked;
                //     if (hobbies[i].checked)
                //         hobbies[i].checked = false;
                //     else {
                //         hobbies[i].checked = true;
                //     }
                // }
            }
        }
    </script>
</head>
<body>
    兴趣爱好:
    <input type="checkbox" name="hobby" value="cpp" checked="checked">C++
    <input type="checkbox" name="hobby" value="cpp" >Java
    <input type="checkbox" name="hobby" value="cpp" >JS
    <br>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReverse()">反选</button>
</body>
</html>